<template>
  <div class="header">
    <div class="icon_back" @click="handleMenuShow">
      <i class="el-icon-back"></i>
    </div>
    <div>
      <span class="text">{{userInfo.uname}}</span> 
      <span>{{userInfo.realname}}</span> 
      <span>
        <button @click="logout">退出</button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userInfo: {
        uname: "",
        realname: ""
      }
    };
  },
  methods: {
    handleMenuShow() {
      this.$emit("toggle");
    },
    // 退出登录按钮
    logout() {
      this.$axios({
        url: "/admin/account/logout"
      }).then(res => {
        console.log(res);
        const { status, message } = res.data;
        if (status == 0) {
          this.$message({
            message,
            type: "success"
          });
          setTimeout(() => {
            this.$router.push("/login");
          }, 1000);
        }
      });
    }
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
  }
};
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
}
.icon_back {
  cursor: pointer;
}
.text{
  margin-right: 10px;
}
button {
  cursor: pointer;
  border: none;
  background-color: #fff;
  padding: 10px;
  font-size: 16px;
}
</style>
